<template>
  <el-config-provider :size="size">
    <el-container>
      <el-aside style="width: auto">
        <!-- 左侧菜单 -->
        <tree-menu :isCollapse="isCollapse"></tree-menu>
      </el-aside>
      <!-- 右侧内容 -->
      <el-container style="width: auto">
        <!-- 顶部菜单 -->
        <el-header>
          <div class="top_menu_box">
            <!-- 顶部左 -->
            <div class="top-menu_1">
              <!-- 切换右侧菜单状态的按钮 -->
              <el-icon
                size="30px"
                color="#666"
                @click="isCollapse = !isCollapse"
                :style="{
                  transform: isCollapse ? 'rotate(180deg)' : 'rotate(360deg)',
                }"
              >
                <Fold />
              </el-icon>
              <!-- 面包屑导航 -->
              <breadcrumb-menu></breadcrumb-menu>
            </div>
            <!--顶部右  -->
            <div class="top_menu_2">
              <!-- 全屏 -->
              <div>
                <Screenfull></Screenfull>
              </div>
              <span>|</span>
              <!-- 组件大小切换 -->
              <div>
                <size-change @changeSize="getSize"></size-change>
              </div>
              <span>|</span>
              <!-- 颜色切换 -->
              <div class="demo-color-block">
                <them-picker></them-picker>
              </div>
              <span>|</span>
              <!-- 语言切换 -->
              <div>
                <language></language>
              </div>
              <span>|</span>
              <!-- 头像 -->
              <div>
                <user-action></user-action>
              </div>
            </div>
          </div>
          <!-- tabs -->
          <div
            style="
              height: 50px;
              display: flex;
              align-items: center;
              box-shadow: 2px 1px 6px 1px #e1e1e1;
            "
          >
            <div class="tabs">
              <tag-page></tag-page>
            </div>
          </div>
        </el-header>
        <!-- 主要内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- 回到顶部 -->
      </el-container>
    </el-container>
  </el-config-provider>
</template>

<script>
// 引用element图标组件
import { Fold, ArrowDown, CaretRight } from "@element-plus/icons-vue";
// 自定义组件
// 树形菜单
import TreeMenu from "@/components/navigation/TreeMenu";
// 面包屑
import BreadcrumbMenu from "@/components/navigation/BreadcrumbMenu";
// tag标签菜单
import TagPage from "@/components/navigation/TagPage";
//element改变尺寸的组件
import { ElConfigProvider } from "element-plus";
// 自定义全屏组件
import Screenfull from "@/components/screenfull/Screenfull";
// 自定义修改尺寸组件
import SizeChange from "@/components/sizechange/SizeChange";
// 修改颜色的组件
import ThemPicker from "@/components/thempicker/ThemPicker";
// 切换语言的组件
import Language from "@/components/language/Language";
// 用户操作的组件
import userAction from "@/components/useraction/userAction";

export default {
  components: {
    // element的组件
    Fold,
    CaretRight,
    ArrowDown,
    ElConfigProvider,
    // 自定义组件
    TreeMenu,
    TagPage,
    BreadcrumbMenu,
    Screenfull,
    SizeChange,
    ThemPicker,
    Language,
    userAction,
  },
  data() {
    return {
      // 是否关闭侧边菜单
      isCollapse: false,
      color1: "#409EFF",
      size: "",
    };
  },
  methods: {
    // 获取size
    getSize() {
      let data = localStorage.getItem("size");
      this.size = data ? data : "default";
    },
  },
  created() {
    this.getSize();
  },
};
</script>

<style lang="less" scoped>
// 头部的数据
.el-header {
  background: #ffffff;
  height: 120px;
  padding: 0px;
  margin-bottom: 3px;
  // 顶部菜单的
  .top_menu_box {
    display: flex;
    align-items: center;
    padding: 0px 20px;
    justify-content: space-between;
    .top-menu_1 {
      display: flex;
      align-items: center;
      height: 65px;
      .el-icon {
        transition: 0.3s;
        margin-right: 20px;
      }
    }
    .top_menu_2 {
      align-items: center;
      display: flex;
    }
    .top_menu_2 > span {
      margin: 0px 15px;
      color: #dcdfe6;
    }
  }
  .tabs {
    height: 35px;
    margin: 10px 0px;
    width: 100%;
    box-shadow: 2px 2px 6px 1px #e1e1e1;
  }
}
// 主要内容
.el-main {
  padding: 0px;
  background: #f2f3f5;
  height: 0vh;
}
</style>
